<template>
  <div id="app">
    <router-view v-if="alive" />

    <tabbar
      @on-index-change="onIndexChange"
      v-if="tabbarShow"
      slot="bottom"
      icon-class="tabItemIconclass"
    >
      <tabbar-item
        :link="{ path: '/graduate' }"
        :selected="$route.path == '/graduate'"
        @on-item-click="onItemClick"
      >
        <img
          slot="icon"
          src="@/assets/img/graduate1.png"
          style="object-fit: contain"
        />
        <img
          slot="icon-active"
          src="@/assets/img/graduate.png"
          style="object-fit: contain"
        />
        <span slot="label">校友</span>
      </tabbar-item>
      <tabbar-item
        :link="{ path: '/activity' }"
        @on-item-click="onItemClick"
        :selected="$route.path == '/activity'"
      >
        <img
          slot="icon"
          src="@/assets/img/activity_icon1.png"
          style="object-fit: contain"
        />
        <img
          slot="icon-active"
          src="@/assets/img/activity_icon.png"
          style="object-fit: contain"
        />
        <span slot="label">活动</span>
      </tabbar-item>
      <tabbar-item
        :link="{ path: '/' }"
        @on-item-click="onItemClick"
        :selected="$route.path == '/'"
      >
        <img
          slot="icon"
          src="@/assets/img/home.png"
          style="object-fit: contain"
        />
        <img
          slot="icon-active"
          src="@/assets/img/home1.png"
          style="object-fit: contain"
        />
      </tabbar-item>
      <tabbar-item
        :link="{ path: '/message' }"
        @on-item-click="onItemClick"
        :selected="$route.path == '/message'"
      >
        <template slot="icon">
          <div class="message-wrapper">
            <img
              src="@/assets/img/message1.png"
              style="object-fit: contain"
            />
            <span v-if="unreadCount > 0" class="el-badge__content">{{ unreadCount }}</span>
          </div>
        </template>
        <img
          slot="icon-active"
          src="@/assets/img/message.png"
          style="object-fit: contain"
        />
        <span slot="label">消息</span>
      </tabbar-item>
      <tabbar-item
        :link="{ path: '/mine' }"
        @on-item-click="onItemClick"
        :selected="$route.path == '/mine'"
      >
        <template slot="icon">
          <div class="message-wrapper">
            <img
              src="@/assets/img/mine1.png"
              style="object-fit: contain"
            />
            <span v-if="unAuditCount > 0" class="el-badge__content">{{ unAuditCount }}</span>
          </div>
        </template>
        <img
          slot="icon-active"
          src="@/assets/img/mine.png"
          style="object-fit: contain"
        />
        <span slot="label" style="text-decoration: none">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, ViewBox } from "vux";
import { getUnreadMessageCount, getUnAuditCount } from "@/api/api";

export default {
  provide() {
    return {
      reload: this.reload,
    };
  },
  components: {
    Tabbar,
    TabbarItem,
    ViewBox,
  },
  computed: {
    direction() {
      return this.$store.getters.getDirection;
    },
    tabbarShow() {
      return this.$store.getters.getTabbarShow;
    },
    titlebarShow() {
      return this.$store.getters.getTitleBarShow;
    },
  },
  data() {
    return {
      entryUrl: document.location.href,
      alive: true,
      unreadCount: 0,
      unAuditCount: 0
    };
  },

  mounted() {
    this.getUnreadCount();
    this.getAuditCount();
  },

  // 监听,当路由发生变化的时候执行
  watch: {
    $route(to, from) {
      if (to.path == "/" || to.path == "/message" || to.path == "/mine" || to.path == "/graduate"|| to.path == "/activity"
        || to.path == "/activity/create"|| to.path == "/mine/activity"|| to.path == "/mine/mutual"
        || to.path == "/mutual"|| to.path == "/mutual/create"
      ) {
        this.$store.dispatch("updateTabbarShow", true);
        this.getUnreadCount();
        this.getAuditCount();
      } else {
        this.$store.dispatch("updateTabbarShow", false);
      }
    },
  },
  methods: {
    onItemClick: function (e) {
      console.log(e);

      this.$store.commit("updateTabItem", "0");

      this.$store.commit("updateTabbarItemShow", e);
      this.getUnreadCount();
      this.getAuditCount();
    },
    onIndexChange: function (e) {
      // console.log(e)
    },
    reload() {
      this.alive = false;
      this.$nextTick(() => {
        this.alive = true;
      });
    },
    async getUnreadCount() {
      try {
        const res = await getUnreadMessageCount({});
        if (res.code === 200) {
          this.unreadCount = res.data || 0;
        }
      } catch (error) {
        console.error('获取未读消息数失败:', error);
      }
    },
    async getAuditCount() {
      try {
        const res = await getUnAuditCount({});
        if (res.code === 200) {
          this.unAuditCount = res.data || 0;
        }
      } catch (error) {
        console.error('获取待审核数量失败:', error);
      }
    }
  },
};
</script>

<style>
.page {
  padding-bottom: 3.75rem;
}
.page_btn {
  width: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 3px;
  position: fixed;
  bottom: 10px;
  margin: 0 16px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}
body,
html {
  padding: 0;
  margin: 0;
}
.tabItemIconclass {
  width: 1.375rem;
  height: 1.375rem;
  object-fit: contain;
}

a {
  text-decoration: none;
}
.weui-tabbar {
  position: fixed !important;
  background-color: #fff !important;
  height: 3.4375rem;

  /* box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28); */
}
.weui-tabbar:before {
  border: none;
}
.weui-tabbar__icon {
  width: 1.375rem !important;
  height: 1.375rem !important;
}
.weui-tabbar__label {
  margin-top: 5px;
  line-height: 1;
  font-size: 0.8125rem !important;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #000 !important;
  text-decoration: none !important;
}
.vux-tab .vux-tab-item {
  font-size: 1rem !important;
  /* font-weight:500; */
  /* color: #21325E !important; */
}

.message-wrapper {
  position: relative;
  display: inline-block;
}

.el-badge__content {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f56c6c;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
  z-index: 1;
  max-width: 20px;
  overflow: hidden;
}
</style>
